<template>
    <div>
        <div
        class="header-abs"
        v-show="showAbs"
        @click="prev()"
        >
            <div class="iconfont iconBack">&#xe624;</div>
        </div>
        <div
        class="header-fixed"
        v-show="!showAbs"
        :style="opacityStyle"
        >
            <div class="iconfont iconBack">&#xe624;
            </div>
                景点详情
        </div>
    </div>
</template>

<script>

export default {
    name: 'DetailHeader',
    data () {
        return {
            showAbs: true,
            opacityStyle: 0
        }
    },
    methods: {
        handleScroll () {
            console.log('a')
            const top = document.documentElement.scrollTop
            console.log(top)
            if (top > 40) {
                this.showAbs = false
                if (top < 190) {
                    const opacity = top / 190
                    this.opacityStyle = {
                        opacity
                    }
                } else {
                   this.opacityStyle = {
                        opacity: 1
                    }
                }
            } else {
                this.showAbs = true
            }
        },
        prev () {
            // 返回上一页  不会跳到顶部   用router-link :to=""  会跳到上一页的最顶部
            this.$router.back(-1)
        }
    },
    // 绑定的是全局事件window  activated在页面展示的时候执行   全局事件需要解绑
    // 因为detail组件不使用keep-alive，所以没有activated钩子，需要在created钩子上绑定事件
    created () {
        console.log('a')
        window.addEventListener('scroll', this.handleScroll)
    },
    // deactivated 页面即将被隐藏或被替换成新页面时执行
    // 用了created，解绑就在beforeDestroy执行即可
    beforeDestroy  () {
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header-abs
        position absolute
        left .2rem
        top .2rem
        width .8rem
        height .8rem
        border-radius 4em
        background rgba(0, 0, 0, .7)
        text-align center
        line-height .8rem
        .iconBack
            color #fff
            font-size .4rem
    .header-fixed
        z-index 2
        position fixed
        top 0
        left 0
        right 0
        overflow hidden
        height $headerHeight
        line-height $headerHeight
        text-align center
        color #fff
        background-color $bgColor
        font-size .32rem
        .iconfont
            position absolute
            top 0
            left 0
            width .64rem
            font-size .4rem
            text-align center
            margin-left .1rem
            color #fff
</style>
